<template>
	<view class="physical-serve">
		<image class="physical-serve-header" :src="baseApi+hospitalInfo.storagePath" mode="scaleToFill"></image>
		<view class="physical-serve-main">
			<u-section title="体检预约" :right="false" :bold='true' :line-color='themeColorLight' color="#000000"></u-section>
			<view class="physical-before flexR" style="">
				<view class="grad-home-register" @click="toPage(1)">
					<u-icon name="edit-pen"></u-icon>
					<text>预约登记</text>
				</view>
				<view class="grad-home-header" @click="toPage(2)">
					<u-icon name="order"></u-icon>
					<text>预约详情</text>
				</view>
			</view>
			<u-section title="体检进度" :right="false" :bold='true' :line-color='themeColorLight' color="#000000"></u-section>
			<view class="physical">
				<view class="grad-home-register" @click="toPage(3)">
					<u-icon name="file-text"></u-icon>
					<text>查看进度</text>
				</view>
			</view>
			<u-section title="体检报告" :right="false" :bold='true' :line-color='themeColorLight' color="#000000"></u-section>
			<view class="physical">
				<view class="grad-home-header" @click="toPage(4)">
					<u-icon name="checkmark-circle"></u-icon>
					<text>查看报告</text>
				</view>
			</view>
		</view>
		<!-- <Load :load="load" /> -->
	</view>
</template>

<script>
	// import Load from '@/components/Load/index.vue'
	import { mapGetters } from 'vuex'
	import { themeColorLight, sectionSize } from '@/static/js/theme.js'
	export default {
		// components:{ Load },
		data() {
			return {
				themeColorLight,
				
			}
		},
		computed:{
			...mapGetters(['baseApi', 'hospitalInfo', 'userInfo'])
		},
		methods: {
			toPage(type){
				// 1 体检预约 2预约详情 3 报告进度 4 报告列表
				if(type===1){
					uni.navigateTo({
						url:'/pages/Service/PhysicalServe/appointment'
					})
				} else {
					uni.navigateTo({
						url:'/pages/Service/PhysicalServe/appointmentDetail?type=' + type
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.physical-serve{
		height: 100%;
		overflow: scroll;
		background-color: #FFF;
		&-header{
			height: 350rpx;
			width: 100%;
			background-color: $theme-color-dark;
		}
		&-main{
			padding: 30rpx;
			.physical-before{
				margin: 20rpx;
				>view{
					height: 150rpx;
					margin: 10rpx;
					flex: 1;
					border-radius: 12rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 50rpx;
					>text{
						font-size: 36rpx;
						margin-left: 10rpx;
					}
				}
			}
			.physical{
				height: 90rpx;
				margin: 30rpx;
				>view{
					// background-image: $grad-color-blue-more;
					height: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					color: #fff;
					border-radius: 12rpx;
					font-size: 50rpx;
					>text{
						font-size: 36rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
